<template>
  <div class="table">
    <div v-if="title" class="title">{{title}}</div>
    <div class="table-block" :style="'height:'+(title?'calc(100% - 30px)':'100%')">
      <div class="table-head table-row">
        <div class="table-col" v-for="(item,index) in tableData.head" :key="index" :style="`width:${item.width}%`">{{item.name}}</div>
      </div>
      <template v-if="tableData.data.length>0">
        <div class="body" id="task-list-2" >
          <div id="vessel-2" :style="{transform:`translate(0px,-${scrollTop2}px)`}">
            <div @click="emitClick(item)" class="table-content table-row" style="cursor: pointer" v-for="(item,index) in tableData.data" :key="index" >
              <div class="table-col" v-for="(item1,index1) in tableData.head" :style="`width:${item1.width}%;color:${index1==3?'#19fbaf':'#fff'}`" :key="index1">
                {{ item[item1.field]}}</div>
            </div>
          </div>
        </div>
      </template>
      <div class="table-content table-row" style="color: #fff;justify-content: center" v-else>暂无数据</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TableFunding",
  emits:['emitClick'],
  props:{
    title:{
      type:String,
      default:''
    },
    tableData:{
      type:Object,
    }
  },
  watch:{
    tableData:{
      deep:true,
      handler(){
        this.$nextTick(()=>{
          this.getTask();
        })
      }
    }
  },
  data(){
    return{
      scrollTop2:0,
      taskTimer2:null,
    }
  },
  beforeDestroy() {
    clearInterval(this.taskTimer2)
  },
  methods:{
    emitClick(item){
      this.$emit('emitClick',item)
    },
    getTask(){
      this.scrollTop2=0;
      clearInterval(this.taskTimer2);
      this.$nextTick(()=>{
        let vesselHeight=document.getElementById('vessel-2').offsetHeight;
        let height=document.getElementById('task-list-2').offsetHeight;
        if(vesselHeight>height){
          this.taskTimer2=setInterval(()=>{
            if(height+this.scrollTop2<vesselHeight){
              this.scrollTop2++;
            }else{
              clearInterval(this.taskTimer2);
              this.getTask()
            }
          },100)
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">
.table{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 15px;
  overflow: hidden;
  .table-block{
    width: 100%;
    height: calc(100% - 30px);
    .body{
      height: calc(100% - 30px);
      overflow-y:auto;
    }
    .body::-webkit-scrollbar{
      width: 0;
    }
    .table-row{
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      background: #1a2229;
      height: 37px;
      .table-col{
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
      }
    }
    .table-head{
      .table-col{
        font-size: 14px;
      }
    }
    .table-row:nth-child(2n){
      background: none;
    }
  }
}
</style>
